import { rehype } from 'rehype';
import {} from 'rehype';
import rehypeFormat from 'rehype-format';
import { isHElement } from './rehype-helper.js';
import type * as hast from 'hast';
import { assert } from 'console';
import { func } from 'effect/FastCheck';

declare module 'hast' {
  export interface Properties {
    style?: string;
    className?: string[];
  }
}

/**
 * @param  {TemplateStringsArray} text
 * @param  {...unknown} args
 * @returns
 */
const html = (text: TemplateStringsArray, ...args: unknown[]) => text.join('');
const rehypeParsed = rehype()
  // .use(rehypeFormat)
  .parse(html`
    <!doctype html>
    <html lang="en" class="the-html" style="content: 'html'">
      <head style="content: 'head'">
        <title style="" class="title">Hi!</title>
      </head>
      <!-- 注释被视为有 -->
      <body style="app" style="/* NONE */">
        <h1 style="content: 'h1'">Hello!</h1>
        <!-- 就算是 只有key的styleAttr, 也被视为有这个attr -->
        <!-- <div style></div> -->
        <!-- 空内容也被视为有 -->
        <div style="" class="body2"></div>
      </body>
    </html>
  `);

// console.dir(rehypeParsed);

const elementQueue: Array<hast.Element> = [];
// const htmlSnip = rehypeParsed;

function visitProc(
  root: hast.Root,
  specialElementContainer?: Array<hast.Element>,
): void {
  let elementLayer = 0;

  root.children.map((content) => {
    if (isHElement(content)) {
      visit(root, content, (elementLayer = 0));
    }
  });
  function visit(
    parent: hast.Parent,
    content: hast.Element,
    layer: number,
  ): void {
    console.log(
      '  '.repeat(layer),
      content.tagName + (content.properties.className
        ? "." + content.properties.className.join('.')
        : ''),
      `style="${content.properties.style?.trim()}"`,
    );
    if (content.properties && content.properties.style) {
      specialElementContainer?.push(content);
    }
    content.children.forEach((element) => {
      if (isHElement(element)) {
        visit(content, element, layer + 1);
      }
    });
  }
}
visitProc(rehypeParsed, elementQueue);
console.log('-----------------------------------');
// elementQueue.map((e) => e.tagName);
console.log(elementQueue)
